<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LarryCMS后台登录</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<!-- load css -->
	<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/register.css" media="all">
</head>
<body>
<div class="layui-canvs"></div>
<form id="registerForm">
<div class="layui-layout layui-layout-login">
	<h1>
		 <strong>医药管理系统</strong>
		 <em>Management System</em>
	</h1>
	<div class="layui-user-icon larry-login">
		 <input name="account" type="text" placeholder="账号" id="accouont" class="login_txtbx"/>
	</div>
	<div class="layui-pwd-icon larry-login">
		 <input name="password" type="password" placeholder="密码" id="password" class="login_txtbx"/>
	</div>

	<!--邮箱验证-->
	<div class="layui-val-icon larry-login">
		<div class="layui-code-box">
			<input type="text" id="Emil_code" name="email" placeholder="邮箱地址"  maxlength="20" class="login_txtbx">
			<!--邮箱验证-->
			<input type="button" id="Emilbut" class="Emilbut" value="获取验证码" style="width: 110.5px;height:49px " onmouseover="tobig()" onmouseout="tosmall()">
		</div>
	</div>
<!--邮箱验证码输入框-->
	<div class="layui-val-icon larry-login">
		<div class="layui-code-box">
			<input type="text" id="code1" name="code" placeholder="邮箱验证码" maxlength="6" class="login_txtbx">
		</div>
	</div>
	<div class="layui-val-icon larry-login">
    	<div class="layui-code-box">
    		<input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx">
			<!--使用canvas画出验证码-->
			<canvas   id="verifyImg"  class="verifyImg" width="120.5px" height="41px" onclick="tochange()"></canvas>
    	</div>
    </div>
    <div class="layui-submit larry-login">
    	<input type="button" value="立即注册" class="submit_btn" onclick="toregisterpro()"/>
    </div>
    <div class="layui-login-text">
		<p>© 2021-2022 木易 版权所有</p>
    </div>
</div>

</form>


<script type="text/javascript" src="common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js"></script>
<script type="text/javascript" src="js/token.js"></script>
<script type="text/javascript">
	/*表单验证,用户名是否已经注册*/
	var checkresult="";
	$(function(){
		$("#accouont").blur(function(){
			var account = $(this).val();
			if(account==""){
				console.log("没有账号")
			}else{
				// $.ajax方法实现
				$.ajax({
					url:"../login/tocheck",
					type:"get",
					data:"account="+ account,
					dataType:"json",
					async:false,
					withCredentials:true,
					success:function(result){
						checkresult=result.data;
						console.log("全局变量:用户个数"+checkresult);
						if (result.data==1){
							layer.open({
								title: '警告'
								,content: '此账号已被注册过'
							});
						}else {
							layer.open({
								title: '<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color:green;"></i>'+'√'
								,content: '此账号可用'
							});
						}
					}
				});
			}
		});
	});







	//邮箱发送六十秒时间间隔,防止频繁发送
	var  wait=5;
	function time(o){
		if (wait==0){
			//去除禁用效果
			o.removeAttribute("disabled");
			o.value="获取验证码";
			wait=5;
			document.getElementById("Emilbut").style.backgroundColor="#FF5722";
		}else {
			o.setAttribute("disabled", true);
			o.value="重新发送(" + wait + ")";
			wait--;
			setTimeout(function() {
						time(o)
					},
					1000)

		}
	}

	//点击获取验证码开始60秒倒计时
	document.getElementById("Emilbut").onclick=function(){
		time(this);
		tosend();
	}

	/*登录验证之前需要验证码验证
	验证码验证成功之后再调用登陆验证
	* */

	/*邮箱格式验证,邮箱格式输入正确才触发*/

	//后端发送电子邮件的方法
	var backemailecode="";//全局变量,用于接受后端生成的邮件验证码

	function tosend(){
		//用户输的邮箱地址
		var emailhost=document.getElementById("Emil_code");
		//邮箱格式
		reg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
		//非空验证
		if(emailhost.value==""){
			layer.open({
				title: '警告'
				,content: '请先输入您的邮箱账号'
			});
			//格式验证
		}else if (!reg.test(emailhost.value)){
			layer.open({
				title: '警告'
				,content: '邮箱格式错误'
			});
			//调用后端的发送邮件的方法
		}else {
			backsendEmail();
		}

		function backsendEmail(){
			console.log("后端发送电子邮件方法已调用")
			$.post("/sendemail/send",$("#registerForm").serialize(),function(res){
				//将验证码拿出来
				backemailecode=res.data;
				console.log("后端验证码"+res.data);
				layer.open({
					title: '成功'
					,content: '验证码已成功发送,请注意查收'
				});
			},"json")
		}

	}


	var outyzmfz="";//定义一个全局变量,在生成验证码时将验证码记录下来
	//注册之前先进性邮箱验证和验证码验证
	function toregisterpro() {
		var inYZM = document.getElementById("code").value;
		var A = new String(inYZM);
		var B = new String(outyzmfz);
		console.log(outyzmfz);
		//验证
		//四位验证码验证与邮箱验证同时成功
		//输入的邮箱验证码验证
		var emailcode = document.getElementById("code1").value;
		//先验证表格不为空
		var inaccount = document.getElementById("accouont");
		var inpassword = document.getElementById("password");
		if (inaccount.value != "" && inpassword.value != "") {
			//再验证用户名是否重复
			if (checkresult == 1) {
				layer.open({
					title: '警告'
					,content: '此账号已被注册过'
				});
			} else {

			if (A.localeCompare(B) == 0) {
				if (emailcode - backemailecode === 0) {
					layer.open({
						title: '成功✔'
						, content: '您已注册成功,请登录'
					});
					toregisterback();
				} else {
					layer.open({
						title: '警告'
						, content: '邮箱验证码验证码输入错误,请重新输入'
					});
				}

			} else {
				/*输入错误后将文本框置空*/
				var nr = document.getElementById("code").value = "";
				layer.open({
					title: '警告'
					, content: '数字验证码输入错误,请重新输入'
				});
				tochange();

			}
		}
			/*var nr=document.getElementById("code").innerHTML="1111";
		console.log(nr);*/
		}else {
			layer.open({
				title: '警告'
				, content: '账号密码不能为空'
			});
		}
	}

	/**
	 * 发送到后端的注册请求(需要经历邮箱验证与验证码验证才可以)
	 */

	function  toregisterback(){
		$.post("/login/register",$("#registerForm").serialize(),function(res){
			if (res.code == 201 ||res.code == 500){
				alert(res.msg);
			}else if (res.code == 200){
				window.sessionStorage.setItem("account",res.data.account);
				window.sessionStorage.setItem("id",res.data.id);
				window.sessionStorage.setItem("type",res.data.type);
				window.sessionStorage.setItem("newFileName",res.data.newFileName);
				location.replace("login.html");
			}
		},"json");
	}
$(function(){
	$(".layui-canvs").jParticle({
		background: "#141414",
		color: "#E6E6E6"
	});
	/*!//登录链接测试，使用时可删除
	$(".submit_btn").click(function(){
	  location.href="index.html";
	});*/
});




	/*登陆页面跳转到注册页面函数*/
	function toregister(){
		location.replace("main.html")
	}

	/*鼠标悬停,注册的跳转链接改变*/
	function tobig(){
	var  registerobj =document.getElementById("Emilbut");
		registerobj.style.backgroundColor="#5CBDAA";
		/*registerobj.innerHTML="点击一下,进入注册页面"#FF5722;*/
	}
	/*鼠标离开,注册的跳转链接改变*/
	function tosmall(){
		var  registerobj =document.getElementById("Emilbut");
		registerobj.style.backgroundColor="#FF5722"

	}




	/* 验证码函数 */
	function YZM(selector,w,h){
		/* 生成随机数的函数 */
		function rn(min,max){
			return parseInt(Math.random()*(max-min)+min);
		}
		/*随机生成颜色的函数*/
		function rc(min,max){
			var r=rn(min,max);
			var g=rn(min,max);
			var b=rn(min,max);
			return `rgb(${r},${g},${b})`
		}
		/* 设置背景 */
		var w=w;
		var h=h;
		var canvas=document.querySelector(selector);
		var ctx=canvas.getContext('2d');
		/*在canvas上绘制背景颜色*/
		ctx.fillStyle=rc(180,230);
		ctx.fillRect(0,0,w,h);
		//随机字符串
		var pool='ABCDEFGHIGKLMNOPQRSTUVWXYZ1234567890';
		for(var i=0;i<4;i++){
			/* 取出随机的字母或数字 */
			var c=pool[rn(0,pool.length)]
			/* 设置随机数字体大小 */
			var fs=rn(18,40);
			//设置随机数旋转角度
			var deg=rn(-30,30);
			/* 设置字体格式 */
			ctx.font=fs+'px Simhei';
			ctx.textBaseline='top'
			/* 设置字体填充颜色 */
			ctx.fillStyle=rc(80,150);
			ctx.save();
			ctx.translate(30*i+15,15);
			ctx.rotate(deg*Math.PI/180);
			ctx.fillText(c,-10,-10)
			ctx.restore();
			outyzmfz+=c;
		}

		/* 随机生成干扰线 */
		for(var i=0;i<5;i++){
			ctx.beginPath()
			ctx.moveTo(rn(0,w),rn(0,h));
			ctx.lineTo(rn(0,w),rn(0,h));
			ctx.strokeStyle=rc(180,230);
			ctx.closePath();
			ctx.stroke();
		}
		/* 随机产生四十个干⚪点 */
		for(var i=0;i<40;i++){
			ctx.beginPath();
			ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
			ctx.closePath();
			ctx.fillStyle=rc(150,200);
			ctx.fill();
		}

	}
	YZM('#verifyImg',120,40);
	function tochange(){
		//每刷新一次重新记录验证码
		outyzmfz="";
		YZM('#verifyImg',120,40);
	}

</script>
</body>
</html>